<template>
	<view class="one">
		<view class="nav">
			<!-- 头像部分 -->
			<view class="info-item">
				<text class="label">头像</text>
				<view class="right-content" @click="goToSelectAvatar">
					<image class="avatar" :src="userInfo.avatar || '/static/tx.jpg'" mode="aspectFill"></image>
					<view class="arrow-box">
						<image class="arrow" src="/static/收起箭头小@2x.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<view class="xia"></view>
			<!-- 姓名部分 -->
			<view class="info-item">
				<text>姓名</text>
				<view class="right-content">
					<text>张先生</text>
					
				</view>
			</view>
			<view class="xia"></view>
			<!-- 电话部分 -->
			<view class="info-item">
				<text>电话</text>
				<view class="right-content">
					<text>15023457896</text>
				
				</view>
			</view>
			<view class="xia"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					avatar: uni.getStorageSync('userAvatar') || '/static/tx.jpg',
					name: '张先生',
					phone: '15023457896'
				}
			}
		},
		onShow() {
			// 每次显示页面时获取最新的头像
			const savedAvatar = uni.getStorageSync('userAvatar');
			if (savedAvatar) {
				this.userInfo.avatar = savedAvatar;
			}
			
			// 监听头像更新事件
			uni.$on('updateAvatar', this.handleAvatarUpdate);
		},
		onUnload() {
			// 页面卸载时移除事件监听
			uni.$off('updateAvatar', this.handleAvatarUpdate);
		},
		methods: {
			// 跳转到头像选择页面
			goToSelectAvatar() {
				uni.navigateTo({
					url: '/packagesUpkeep/PutInformation/PutInformation'
				});
			},
			// 处理头像更新
			handleAvatarUpdate(avatar) {
				if (avatar) {
					this.userInfo.avatar = avatar;
					// 更新本地存储
					uni.setStorageSync('userAvatar', avatar);
				}
			}
		}
	}
</script>

<style>
page{
	background:#F7F7F7;
	}  
	.one{
		padding-top: 20rpx;
		height: 240rpx;
		background-color: #2D80F9;
	}
	.nav{
		width: 680rpx;
		background-color: white;
		
		border-radius: 20rpx;
		margin: 0 auto;
	}

.info-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 40rpx;
}

.label {
	color: #333;
	font-size: 28rpx;
}

.right-content {
	display: flex;
	align-items: center;
	gap: 16rpx;
	margin-right: -10rpx;
}

.avatar {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
}

.arrow-box {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 10rpx;
}

.arrow {
	width: 28rpx;
	height: 28rpx;
	opacity: 0.7;
}

.info-item text {
	color: black;
	font-size: 28rpx;
}
.xia{

	margin: 0rpx 20rpx;
	height: 6rpx;
	background-color: #F6F6F6;
	
}
</style>
